import React, { Component } from 'react';
import "../../styles/Cate/CateList.scss"
import * as service from "../../api/index";

class CateList extends Component {
    constructor(props) {
        super(props);
        this.state = {
            categorylist: [],
            categorysubcate: [],
            clickstate: 0
        }
    }
    async componentDidMount() {
        var res = await service.category_list();
            this.setState({ categorylist: res.data.list })
            var res2 = await service.category_subcate({ id: res.data.list[0].id });
            this.setState({ categorysubcate: res2.data.subcate.subcategory })
    }
    async statechange(index, id) {
        this.setState({ clickstate: index })
        var res2 = await service.category_subcate({ id: id });
        if (res2.data.code == 200) {

            this.setState({ categorysubcate: res2.data.subcate.subcategory })
        }
    }
    render() {
        return (
            <div className='catelist'>
                <div className="left">
                    {
                        this.state.categorylist.map((item, index) => {
                            return (
                                <li className={this.state.clickstate === index ? 'active' : ''} onClick={() => { this.statechange(index, item.id) }} key={index}><span>{item.name}</span></li>
                            )
                        })
                    }
                </div>
                <div className="right">
                    {
                        this.state.categorysubcate.map((item, index) => {
                            return (
                                <div className="name2" key={index}>
                                    <div className='title'> {item.name}</div>
                                    <div className="list">
                                        {
                                            item.subNavs.map((item, index) => {
                                                return (
                                                    <div className="item" key={index}>
                                                        < img src={item.pic} alt="" />
                                                        <p>{item.name}</p >
                                                    </div>
                                                )
                                            })
                                        }
                                    </div>
                                </div>
                            )
                        })
                    }
                </div>
            </div>
        );
    }
}

export default CateList;